<template>
    <div>
		<el-form ref="formRef" :model="form" :rules="rules" label-width="100px">
			<template v-if="props.actionType === '样品清退|编辑'">
				<el-form-item label="项目编号" prop="project_id">
					<el-input disabled v-model="form.project_id"></el-input>
				</el-form-item>
				<el-form-item label="客户编号" prop="client_id">
					<el-input disabled v-model.number="form.client_id"></el-input>
				</el-form-item>
				<el-form-item label="样品编号" prop="sample_id">
					<el-input disabled v-model.number="form.sample_id"></el-input>
				</el-form-item>
				<el-form-item label="样品名称" prop="sample_name">
					<el-input disabled v-model="form.sample_name"></el-input>
				</el-form-item>
				<el-form-item label="批号" prop="lot_number">
					<el-input disabled v-model="form.lot_number"></el-input>
				</el-form-item>
				<el-row>
					<el-col :span="8">
						<el-form-item label="原始数量" prop="sample_amount">
							<el-input-number disabled v-model="form.sample_amount" :precision="2" :step="0.5" min='0'></el-input-number>
						</el-form-item>	
					</el-col>
					<el-col :span="8">
						<el-form-item label="原始库存量" prop="current_amount">
							<el-input-number v-model="form.current_amount" :precision="2" :step="0.5" min='0'></el-input-number>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item disabled label="原始规格" prop="size">
							<el-input disabled v-model="form.size"></el-input>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="12">
						<el-form-item label="分装总库存" prop="disp_amount">
							<el-input-number v-model="form.disp_amount" :precision="2" :step="0.5" min='0'></el-input-number>
						</el-form-item>	
					</el-col>
					<el-col :span="12">
						<el-form-item disabled label="分装规格" prop="disp_size">
							<el-input disabled v-model="form.disp_size"></el-input>
						</el-form-item>
					</el-col>
				</el-row>
			</template>
			<template v-else>
				<el-form-item label="项目编号" prop="project_id">
				<el-input v-model="form.project_id"></el-input>
				</el-form-item>
				<el-form-item label="客户编号" prop="client_id">
					<el-input v-model.number="form.client_id"></el-input>
				</el-form-item>
				<el-form-item label="样品编号" prop="sample_id">
					<el-input v-model.number="form.sample_id"></el-input>
				</el-form-item>
				<el-form-item label="样品名称" prop="sample_name">
					<el-input v-model="form.sample_name"></el-input>
				</el-form-item>
				<el-form-item label="批号" prop="lot_number">
					<el-input v-model="form.lot_number"></el-input>
				</el-form-item>
				<el-form-item label="原始规格" prop="size">
					<el-input v-model="form.size"></el-input>
				</el-form-item>
				<el-form-item label="原始数量" prop="sample_amount">
					<el-input-number v-model="form.sample_amount" :precision="2" :step="0.5" min='0'></el-input-number>
				</el-form-item>
				<el-row>
					<el-form-item label="到样日期" prop="arrive_time">
						<el-date-picker
							class="arrive_time"
							type="datetime"
							v-model="form.arrive_time"
							placeholder="请选择日期"
							format="YYYY-MM-DD HH:mm:ss"
							date-format="YYYY/MM/DD ddd"
							time-format="A hh:mm:ss"
						/>
					</el-form-item>
					<el-form-item label="有效日期" prop="contract_time">
						<el-date-picker
							v-model="form.contract_time"
							type="datetime"
							placeholder="请选择日期"
							format="YYYY-MM-DD HH:mm:ss"
							date-format="MMM DD, YYYY"
							time-format="HH:mm"
						/>
					</el-form-item>
				</el-row>
			</template>
			<el-form-item>
				<el-button type="primary" @click="record()" >保 存</el-button>
				<el-button type="warning" @click="onReset(formRef)" >重 置</el-button>
			</el-form-item>
			<el-dialog 
				draggable 
				title="操作记录" 
				v-model="reasonVisible"
				width="800px" 
				destroy-on-close
				:close-on-click-modal="false"
			>
				<recordEdit ref="optRecord" :data="form" :actionType="props.actionType" :conFirm="conFirm"></recordEdit>
			</el-dialog>
		</el-form>
    </div>
</template>
<script setup lang="ts">
import { ElMessage, FormInstance, FormRules, UploadProps } from 'element-plus'
import useService from '../../../hooks/Service/useService'
import recordEdit from '../../record/recordEdit.vue'
import useSample from '../../../hooks/Sample/useSample'
import { ref } from 'vue';

const { getService } = useService()
const service = ref()
getService().then( res => { service.value=res.data })

const props = defineProps({
	data: {
		type: Object,
		required: true
	},
	edit: {
		type: Boolean,
		required: false
	},
	update: {
		type: Function,
		required: false
	},
	actionType: {
		type: String,
		required: false
	}
});

const defaultData = {
	client_id: '',
	sample_id: '',
	sample_name: '',
	lot_number:'',
	size: '',
	sample_amount: 0,
	arrive_time:'',
	contract_time:''
};

const form = ref({ ...(props.edit ? props.data : defaultData) });
const rules: FormRules = {
	project_id: [{ required: true, message: '项目编号不能为空！', trigger: 'blur' }],
	client_id: [{ required: true, message: '项目编号不能为空！', trigger: 'blur' }],
	sample_id: [{ required: true, message: '样品编号不能为空！', trigger: 'blur' }],
	sample_name: [{ required: true, message: '样品名字不能为空！', trigger: 'blur' }],
	lot_number: [{ required: true, message: '批号不能为空！', trigger: 'blur' }],
	size: [{ required: true, message: '规格不能空！', trigger: 'blur' }],
	sample_amount: [{ required: true, message: '原始样品量不能为0！', trigger: 'blur' }],
	current_amount: [{ required: true, message: '库存量不能为0！', trigger: 'blur' }],
	disp_amount: [{ required: true, message: '分装库存量不能为0！', trigger: 'blur' }],
	arrive_time: [{ type:"date", required: true, message: '到样日期不能为空！', trigger: 'change' }],
	contract_time: [{ type:"date", required: true, message: '有效日期不能为空！', trigger: 'change' }],
};

const formRef = ref<FormInstance>();
const saveEdit = (formEl: FormInstance | undefined) => {
	if (!formEl) return;
	formEl.validate(valid => {
		if (!valid) return false;
	});
};
/* 方法暴露 */
const onReset = (formEl: FormInstance | undefined) => {
    if (!formEl) return;
    formEl.resetFields();
};

const reasonVisible=ref(false)
const record = () => {
	reasonVisible.value=true
}

const { editSample } = useSample()
const optRecord = ref()
const conFirm = (row:any) => {
	optRecord.value.postRecord(row).then(res=>{
		if(res.data===202){
			ElMessage.success("行为记录成功！")
			editSample(row.data.id,row.data).then( res => {
				if(res.data === 202){
					props.update(form.value);
					ElMessage.success("编辑信息成功！")
				}
			})
		}else{
			ElMessage.error("行为记录出错！")
		}
	})
}
</script>

<style scoped>
.el-input-number {
	width: 200px;
}
.el-row {
	margin-bottom: 4px
}
</style>
